<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-23 09:21:57
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-30 13:57:54
-->
<template>
  <el-transfer
    class="identityResourceTransfer"
    :data="props.data"
    :titles="['已拥有', '未拥有:']"
    v-model="claimTypeList"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { onMounted, PropType, ref, watch } from 'vue'

interface IOption{
  key: string
  label: string
  disabled: boolean
}
const props = defineProps({
  data: {
    type: Array as PropType<IOption[]>,
    required: true
  },
  activate: {
    type: Array as PropType<string[]>,
    required: true
  }
})

interface EmitsType {
  (e: 'update:activate', value: string[]): void
}
const emit = defineEmits<EmitsType>()

const claimTypeList = ref<string[]>([])

const init = () => {
  claimTypeList.value = props.data.filter(item => !props.activate.includes(item.key)).map(item => item.key)
}
watch(() => props.activate, () => {
  claimTypeList.value = props.data.filter(item => !props.activate.includes(item.key)).map(item => item.key)
})

const handleChange = () => {
  const activateValues = props.data.filter(item => {
    return !claimTypeList.value.includes(item.key)
  }).map(item => {
    return item.key
  })
  emit('update:activate', activateValues)
}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.identityResourceTransfer{
  display: flex;
  justify-content: space-between;
}
</style>
